<template>
	<view class="">
		<view class="cellItem" v-for="(item,index) in list" @click="itemClick(item)">
			<!-- cell头部 -->
			<view class="cellHeaderView">
				<view class="cellTitle">{{item.materialName}}</view>
				<view class="inventoryQuantity" type="primary" :plain="true" size="mini">
					{{item.score}}
				</view>
				<view class="updateTime">采购日期：{{item.date}}</view>
			</view>
			<view class="seporateLine"></view>
			
			<!-- cell内容部分 -->
			<view class="cellContentView">
				<view class="cellContentView-row">
					<view class="cellContent-title">采购企业：</view>
					<view class="cellContent-detail cellContent-detailMargin">{{item.supplier}}</view>
					<view class="cellContent-title">船&nbsp&nbsp&nbsp号：</view>
					<view class="cellContent-detail">{{item.shipName}}</view>
				</view>
				<view class="cellContentView-row">
					<view class="cellContent-title">数&nbsp&nbsp&nbsp量：</view>
					<view class="cellContent-detail cellContent-detailMargin">{{item.buycount}}</view>
					<view class="cellContent-title">价&nbsp&nbsp&nbsp格：</view>
					<view class="cellContent-detail cellContent-detailMargin">{{item.price}}元</view>
					<view class="cellContent-title">吨度价：</view>
					<view class="cellContent-detail">{{item.tonPrice}}元</view>
				</view>
				<view class="cellContentView-row">
					<view class="cellContent-title">Fe：</view>
					<view class="cellContent-detail cellContent-detailMargin">{{item.Fe}}</view>
					<view class="cellContent-title">P：</view>
					<view class="cellContent-detail cellContent-detailMargin">{{item.P}}</view>
					<view class="cellContent-title">SiO2：</view>
					<view class="cellContent-detail">{{item.SiO2}}</view>
				</view>
				<view class="cellContentView-row">
					<view class="cellContent-title">H2O：</view>
					<view class="cellContent-detail cellContent-detailMargin">{{item.H2O}}</view>
					<view class="cellContent-title">Al2O3：</view>
					<view class="cellContent-detail cellContent-detailMargin">{{item.Al2O3}}</view>
					<view class="cellContent-title">S：</view>
					<view class="cellContent-detail">{{item.S}}</view>
				</view>
			</view>
			
			<view class="cellFooterView-line"></view>
			
			<!-- cell的footer部分 -->
			<view class="cellFooterView">
				<view class="cellFooterView-options">
					<view class="buyerView">采购员：{{item.buyer}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"purchaseOrderCell",
		props: {
			list: {
				type: Array,
				default() {
					return [];
				}
			},
		},
		data() {
			return {
				
			}
		},
		methods: {
			//点击某项item
			itemClick(item) {
				// 发送事件给父组件
				this.$emit('itemClick', item);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.cellItem {
		background-color: #FFFFFF;
		margin: 30rpx 0rpx;
		padding: 0rpx 20rpx;
		border-radius: 15rpx;
	}
	
	.cellHeaderView {
		height: 49rpx;
	}
	
	.cellTitle {
		float: left;
		line-height: 49rpx;
		font-size: 25rpx;
		color: #333333;
	}
	
	.inventoryQuantity {
		float: left;
		width: 30rpx;
		height: 30rpx;
		line-height: 30rpx;
		border-color: #1CBD7A;
		border-width: 1rpx;
		border-style: solid;
		border-radius: 50%;
		margin-top: 9rpx;
		margin-left: 20rpx;
		font-size: 14rpx;
		color: #1CBD7A;
		text-align: center;
	}
	
	.updateTime {
		float: right;
		line-height: 49rpx;
		color: #8C8B8B;
		font-size: 17rpx;
	}
	
	.seporateLine {
		width: 646rpx;
		height: 1rpx;
		background: #F3F3F3;
		margin-left: 22rpx;
	}
	
	.cellContentView {
		color: #7C7B7B;
		height: 212rpx;
		margin-top: 8rpx;
	}
	
	.cellContentView-row {
		width: 100%;
		height:50rpx;
	}
	
	.cellContent-title {
		font-weight: 600;
		font-size: 22rpx;
		font-weight: bold;
		color: #333333;
		float: left;
	}
	
	.cellContent-detail {
		font-size: 22rpx;
		float: left;
		color: #666666;
		float: left;
	}
	
	.cellContent-detailMargin {
		margin-right: 60rpx;
	}
	
	.cellFooterView-line {
		width: 646rpx;
		height: 1rpx;
		margin: 0 auto;
		background: #F3F3F3;
	}
	
	.cellFooterView {
		padding: 9rpx 0;
		height: 58rpx;
	}
	
	.buyerView {
		height: 40rpx;
		background: linear-gradient(90deg, #4DA9E5 0%, #0773C0 100%);
		border-radius: 20rpx;
		font-size: 20rpx;
		color: #FFFFFF;
		line-height: 40rpx;
		text-align: center;
		float: right;
		padding: 0 20rpx;
	}
</style>
